import React, { Component } from 'react'
import PageHeaderWrapper from '@/components/PageHeaderWrapper'
import { Spin, Button, Divider, Descriptions } from 'antd'
import styles from './index.less'
import Information from './Information'
import TableList from './TableList'
import Modales from '../Buyoutlist/Modales/index'
import { router } from 'umi'
import { getParam } from '@/utils/utils'
import { connect } from 'dva'

@connect(({ detail }) => ({ ...detail }))
export default class Buyoutdetail extends Component {
  state = {
    loading: true,
    isVisible: false,
    isType: null,
    wrapData: [],
    userOrders: {},
    goodsData: {}
  }
  onShowmodal = () => {
    this.setState({
      isVisible: true,
      isType: 'note'
    })
  }
  onCancel = () => {
    this.setState({
      isVisible: false
    })
  }
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'detail/getDetailinformation',
      payload: {
        id: getParam('id')
      },
      callback: res => {
        if (res.msg === '操作成功') {
          this.setState({
            loading: false,
            wrapData: res.data,
            userOrders: {
              one: !!res.data.userOrders ? res.data.userOrders.realName : null,
              two: !!res.data.userOrders ? res.data.userOrders.telephone : null,
              three: !!res.data.userOrders ? res.data.userOrders.idCard : null
            },
            goodsData: {
              one: !!res.data.orderAddress
                ? res.data.orderAddress.realname
                : null,
              two: !!res.data.orderAddress
                ? res.data.orderAddress.telephone
                : null,
              three: !!res.data.orderAddress
                ? `${res.data.orderAddress.provinceStr}${res.data.orderAddress.cityStr}${res.data.orderAddress.areaStr}${res.data.orderAddress.street}`
                : null
            }
          })
        }
      }
    })
  }
  render() {
    const {
      loading,
      isType,
      isVisible,
      wrapData,
      userOrders,
      goodsData
    } = this.state
    const columns = [
      {
        title: '宝贝',
        dataIndex: 'productImage',
        render: productImage => {
          return (
            <div>
              {!!productImage ? (
                <img
                  style={{ width: '50px', height: '50px' }}
                  src={productImage}
                  alt="error"
                />
              ) : (
                '图片错误'
              )}
            </div>
          )
        }
      },
      { title: '商品名称', width: 200, dataIndex: 'productName' },
      { title: '商品规格', dataIndex: 'skuTitle' },
      { title: '商品市场价', dataIndex: 'marketPrice' },
      { title: '销售价', dataIndex: 'realSalePrice' },
      { title: '已付租金', dataIndex: 'paidRent' },
      { title: '买断尾款', dataIndex: 'endFund' }
    ]
    const columnses = [
      {
        title: '宝贝',
        dataIndex: 'productImage',
        render: productImage => {
          return (
            <div>
              {!!productImage ? (
                <img
                  style={{ width: '50px', height: '50px' }}
                  src={productImage}
                  alt="error"
                />
              ) : (
                '图片错误'
              )}
            </div>
          )
        }
      },
      {
        title: '订单编号',
        dataIndex: 'orderId',
        width: 150,
        render: orderId => {
          return (
            <a
              onClick={() =>
                router.push(`/list/buyout/olddetail?id=${orderId}`)
              }
            >
              {orderId}
            </a>
          )
        }
      },
      { title: '商品名称', width: 200, dataIndex: 'productName' },
      { title: '商品规格', dataIndex: 'skuTitle' },
      { title: '应付租金', dataIndex: 'paidRent' },
      { title: '已付租金', dataIndex: 'endFund' },
      {
        title: '订单状态',
        dataIndex: 'status',
        render: status => {
          return (
            <div>
              {(() => {
                switch (status) {
                  case 'USER_CANCELED_CLOSED':
                    return '用户取消订单'
                  case 'WAITING_PAYMENT':
                    return '待支付'
                  case 'USER_OVERTIME_PAYMENT_CLOSED':
                    return '用户超时支付关闭订单'
                  case 'PLATFORM_CLOSE_ORDER':
                    return '平台关闭订单'
                  case 'BUSINESS_OVERTIME_CLOSE_ORDER':
                    return '商家超时发货关闭订单'
                  case 'BUSINESS_CLOSE_ORDER':
                    return '商家关闭订单'
                  case 'WAITING_BUSINESS_DELIVERY':
                    return '待商家发货'
                  case 'WAITING_USER_RECEIVE_CONFIRM':
                    return '待用户确认收货'
                  case 'WAITING_GIVE_BACK':
                    return '租用中'
                  case 'WAITING_SETTLEMENT':
                    return '待结算'
                  case 'WAITING_SETTLEMENT_PAYMENT':
                    return '出结算单后的待支付'
                  case 'ORDER_FINISH':
                    return '订单完成'
                  case 'ORDER_VERDUE':
                    return '订单逾期'
                  case 'SETTLEMENT_RETURN_CONFIRM_PAY':
                    return '结算单违约金支付逾期'
                  case 'USER_PAY_FAIL_CLOSE':
                    return '轮询支付失败关闭订单'
                  default:
                    return null
                }
              })()}
            </div>
          )
        }
      }
    ]
    const businessmenNote = {
      one: '备注人',
      two: '备注内容',
      three: '备注时间'
    }
    const buyersInformation = {
      one: '真实姓名',
      two: '联系电话',
      three: '身份证'
    }
    const goodsInformation = {
      one: '收货人',
      two: '电话',
      three: '地址'
    }
    return (
      <PageHeaderWrapper back title="买断订单详情">
        <Spin spinning={loading}>
          <div className={styles.title}>
            <div>
              当前订单状态：
              {(() => {
                switch (wrapData.status) {
                  case 'CANCEL':
                    return '用户取消'
                  case 'CLOSE':
                    return '关闭'
                  case 'FINISH':
                    return '已完成'
                  case 'WAIT_PAY':
                    return '待支付'
                  case 'PAYING':
                    return '支付中'
                  default:
                    return '查询错误'
                }
              })()}
            </div>
            <Button onClick={this.onShowmodal} type="primary">
              备注
            </Button>
          </div>
          <div className={styles.footer_wrap}>
            <div className={styles.header}>订单信息 </div>
            <Divider style={{ margin: '0px 0' }} />
            <div
              style={{
                fontSize: '16px',
                fontWeight: 'bold',
                marginBottom: '20px',
                paddingLeft: '20px',
                paddingTop: '20px'
              }}
            >
              {' '}
              商家备注
            </div>
            <div style={{ paddingLeft: '20px' }}>
              {!!wrapData.businessRemark
                ? wrapData.businessRemark.map((item, sign) => {
                    return (
                      <Descriptions key={sign} colon={false}>
                        <Descriptions.Item label="备注人姓名：" span={1}>
                          {item.userName}
                        </Descriptions.Item>
                        <Descriptions.Item label="备注内容：" span={1}>
                          {item.remark}
                        </Descriptions.Item>
                        <Descriptions.Item label="备注时间：" span={1}>
                          {item.createTime}
                        </Descriptions.Item>
                      </Descriptions>
                    )
                  })
                : null}
            </div>
            <Divider style={{ margin: '16px 0' }} />
            <Information
              lable={buyersInformation}
              data={userOrders}
              title="买家信息"
              style={{ paddingLeft: '20px' }}
            />
            <Divider style={{ margin: '16px 0' }} />
            <Information
              lable={goodsInformation}
              data={goodsData}
              title="收货信息"
              style={{ paddingLeft: '20px' }}
            />
            <Divider style={{ margin: '16px 0' }} />
            <div className={styles.title_less}>
              买断详情 &nbsp;
              <span style={{ color: 'red' }}>(买断尾款=销售价-已付租金)</span>
            </div>
            <TableList
              tableData={
                !!wrapData.buyOutOrderLists ? wrapData.buyOutOrderLists : []
              }
              columns={columns}
            />
            <div className={styles.title_less}>原订单</div>
            <TableList
              tableData={
                !!wrapData.buyOutOrderOsriginalList
                  ? wrapData.buyOutOrderOsriginalList
                  : []
              }
              columns={columnses}
            />
          </div>
          <Modales type={isType} visible={isVisible} onCancel={this.onCancel} />
        </Spin>
      </PageHeaderWrapper>
    )
  }
}
